<template>
	<div class="termCon">
		<div class="title">用户协议</div>
		<div class="content">
			<div class="smenu">
				<ul class="f_row">
					<li class="f_cell" v-bind:class=" { 'on':menu_type == '0' } " @click=" setMenu(0) ">网站服务协议</li>
					<li  class="f_cell" v-bind:class=" { 'on':menu_type == '1' } " @click=" setMenu(1) ">投资承诺函</li>
					<li  class="f_cell"  v-bind:class=" { 'on':menu_type == '2' } " @click=" setMenu(2) ">投资风险提示函</li>
				</ul>
			</div>
			<div class="terms_content">
                {{{msg}}}
            </div>
		</div>
		<div style="text-align:center;padding:5px 0px;">
			<button class="btn" v-bind:class="confirm.timecls" @click="goback">{{confirm.btnTxt}}</button>
		</div>
	</div>
</template>

<script>

var strVar1 = "1";
var strVar2 ="2";
var strVar3 = "3";
var time_work = null;
import { mapGetters } from 'vuex'
import api from '../../data/api'

export default {
	data() {
		return {
			menu_type:'0',
			dataTxt:[strVar1, strVar2, strVar3],
			msg:'',

			confirm: {stop:false, timecls:'dis', disableBtn:true,btnTxt:"同意并继续",timer:0},
		}
	},
    computed: {
      ...mapGetters([
		  'showDialog'
      ])
	},
	watch: {

		showDialog: function (nval) {
			
			if(nval){
				this.confirm.timecls = 'dis';
				this.confirm.disableBtn = true;
				this.startTimer();
			}else{
				if(this.confirm.disableBtn){
					this.$router.go('/')
				}
			}
			//this.star_time = this.date
		},
	},

	methods: {

	    updateTimes () {


	        if(this.confirm.timer <= 0)
	        {				
				this.stopTimeCount('同意并继续');
				this.confirm.timecls='';
	        }
	        else{
				this.confirm.timecls='dis';
	            this.confirm.timer--;
	            this.confirm.btnTxt = '剩余'+this.confirm.timer+'秒';
	        }

		},

		stopTimeCount(str){
			clearInterval(time_work);
			this.confirm.timer  = 0;
			this.confirm.stop = false;
			this.confirm.disableBtn = false;
			this.confirm.btnTxt = str;
			//str = '重新发送'
		},


	    startTimer () {
			clearInterval(time_work);
			//if(this.msn.timer>0) return;
			if(this.confirm.timer == 0)	this.confirm.timer = 5;
	        if(this.confirm.stop == false)
	        {
				time_work = setInterval(this.updateTimes,1000);
	        }
	        else
	        {
				clearInterval(time_work);
	        }

		},

		setMenu(key){
			this.menu_type = key;
			this.msg = this.dataTxt[key];
        },
        
		async getTerms(){
			var res = await api.news.detail({"id":"2297"});
			this.dataTxt[0] = res.data.content;

			res = await api.news.detail({"id":"2298"});
			this.dataTxt[1] = res.data.content;

			res = await api.news.detail({"id":"2299"});
			this.dataTxt[2] = res.data.content;

			this.msg = this.dataTxt[0];
			//console.log(this.user_terms)
		},

		goback(){
			if(this.confirm.disableBtn) return;
			this.$store.dispatch('setShowDialog',  false)
			///this.$store.dispatch('setShowDialog', true)
			//this.$store.dispatch('setDialogMsg', 'reg');
		}
    },

    ready(){
		var vm = this;
        vm.$nextTick(function(){
			vm.getTerms();
        });
	}
}
</script>
<style lang="scss"  scoped>
 @import '../../assets/sass/mixins';
	p{
		line-height: 28px;
		display: block;
		margin-bottom:15px;
	}

.termCon{
    background-color: #fff;
    box-shadow: 0px 4px 0px 0px #e2c04a;
    border-radius: 8px;
    display: block;
	padding-bottom: 10px;
	.smenu{
		font-size:12px;
		position: relative!important;
		box-shadow:none!important;
		.f_row{
			@include box('', 'center', 'center');
			width:100%;
		}
		.f_cell{
			text-align: center;
			background-color: #fbfbfb;
			@include flex(1);
			line-height: 25px;
			padding:5px 0px;
		}
		.on{
			background-color: #fddc97;
			color:#775101;
			position: relative;
			&:before {
				content: " ";
				width: 0;
				height: 0;
				line-height: 0;
				border-width: 10px 10px 0px 10px;
				border-style: dashed solid solid;
				border-left-color: transparent;
				border-right-color: transparent;
				position: absolute;
				border-top-color: #fddc97;
				left: 50%;
				bottom: -8px;
				z-index: 10;
				-webkit-transform: translate(-50%);
				transform: translate(-50%);
				}
		}
	}
	.title{
		height: 40px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
		background-color: #fcc042;
		line-height: 40px;
		font-size: 18px;
		text-align: center;
		color: #775101;
	}
	.terms_content{
		padding:10px;
		height: 250px;
		overflow-y: scroll;
		overflow-x: hidden;
		font-size:12px;
		line-height: 30px;
		margin-top:10px;
	}


	button.btn {
		background-color: #ffdf54;
		color: #8807c6;
		border: none;
		text-shadow: 0px 1px 0px white;
		box-shadow: 0px 4px 0px 0px #dc0c44;
		font-size: 16px;
		padding: 5px 20px;
		border-radius: 5px;
	}

	button.btn.dis{
		background-color: #bbb;
		color:#fff;
		text-shadow:none;
		box-shadow: 0px 4px 0px 0px #999;
	}


}
</style>
